/*
 * Copyright (c) 2019 Nordic Semiconductor ASA
 *
 * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
 */


$enable-transitions: false;
$enable-rounded: false;
$body-bg: #cfd8dc;

$primary: #00a9ce;
$theme-colors: (
    'primary': $primary,
    'secondary': #6c757d, // From brand.scss
    // Nordic primary blue
);

@import '@nordicsemiconductor/pc-nrfconnect-shared/styles';
$custom-control-indicator-checked-bg: $primary;
$custom-control-indicator-bg: $white;
@import 'bootstrap/scss/bootstrap';

body {
    -webkit-user-select: none;
    -webkit-app-region: drag;
    cursor: default;
    font-family: 'Roboto';
}

#webapp {
    display: flex;
    flex-direction: column;

    .nav {
        background-color: theme-color('primary');
        padding: 0.5rem 2rem;
        align-items: center;

        .nav-link {
            height: 3rem;

            color: #fff;
            text-transform: uppercase;
            font-weight: 300;
            align-items: center;

            display: flex;

            &.active {
                font-weight: bold;
                cursor: default;
            }
        }

        .core19-logo {
            height: 2.5rem;
        }
    }

    .tab-content {
        padding: 16px 32px 16px 32px;
        overflow: hidden;

        flex: 1;
        display: flex;
        flex-direction: column;

        .tab-pane.active {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .progress {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            height: 2px;
            border-radius: 0;
            background-color: transparent;
        }
    }

    .content-container {
        overflow-anchor: none;
    }

    .with-scrollbar {
        // Height: subtract navigation header (64px) and the 16px margins at top and bottom
        height: calc(100vh - 64px - 16px - 16px);
        margin-right: -14px;
        overflow-y: overlay;
        scrollbar-gutter: stable;
        @include scrollbars($gray-100);
    }
    .filter-adjusted-height {
        // Height: subtract navigation header (64px), filterbox (40px), and the 16px margins at top and bottom
        height: calc(100vh - 64px - 40px - 16px - 16px);
        margin-top: 0;
    }
}

.core-app-icon {
    position: relative;

    img,
    .icon-replacement {
        height: 40px;
        width: 40px;
        margin: 0 8px;
    }

    .icon-replacement {
        border-radius: 8px;
        background: #e6f8ff;
    }

    .mdi {
        position: absolute;
        top: 22px;
        left: 27px;
        font-size: 20px;
    }

    .mdi-alert {
        color: darkorange;
    }

    .mdi-information {
        color: theme-color('primary');
    }

    .alert-icon-bg {
        position: absolute;
        width: 8px;
        height: 10px;
        top: 34px;
        left: 34px;
        background-color: white;
        border-radius: 50%;
    }
}

.wide-btns > .btn {
    min-width: 10ch;
}

.btn-toolbar {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 0.75em;
}

.btn {
    line-height: 1em;
}

.ellipsize-left {
    direction: rtl;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-title {
    font-size: 120%;
}

.h4,
.h5 {
    font-weight: 400;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

.text-muted-more {
    @extend .text-muted;
    color: lighten($color: $text-muted, $amount: 30%) !important;
}

.dropdown-menu:empty {
    @extend .text-muted-more;
    @extend .small;
    text-align: center;

    &::after {
        content: 'No actions available';
    }
}

.release-notes {
    overflow-y: scroll;

    max-height: 70dvh;
    @media screen and (max-height: 650px) {
        max-height: 55dvh;
    }

    @include scrollbars($white);
    h2 {
        font-size: 1.25rem;
    }
    h3 {
        font-size: 1rem;
    }
}

.filterbox {
    z-index: 1;
    top: 0;
    height: 40px;
    position: sticky;
    background-color: $body-bg;
    align-items: start;

    > * {
        margin-left: 0.75em;
    }
    :first-child {
        margin-left: 0;
    }

    .btn .mdi {
        margin-right: 0.25rem;
    }
    .btn:not(:hover) {
        background: white;
        color: $text-muted;
    }
    .dropdown-toggle::after {
        display: none;
    }
    .form-control {
        line-height: 1em;
        height: initial !important;
        width: initial !important;
        border-color: $secondary;
        padding: 0.29rem 0.75rem;
    }
}

.user-data-policy {
    overflow-y: scroll;
    @include scrollbars($white);
    height: 40vh;
}

.dropdown-toggle:empty::after {
    position: relative;
    top: 2px;
}

.settings-pane-container {
    .toggle label {
        justify-content: flex-start;
    }

    .toggle-label {
        font-size: 1rem;
    }
}
